<template>
	<view class="">
		<view class="nearby-store-address bg-white">
			<view class="u-flex u-m-b-20">
				<view class="e-flex-1 u-p-r-40">
					<text class="nearby-store-address__icon c-primary" :style="[bgColor]">{{ $t('nearby.商家') }}</text>
					<text class="u-font-32 u-p-l-6">{{ addText }}</text>
				</view>
				<image src="/pages/systemPay/static/nearby/navigation2.png" class="img-28 u-m-l-50" @tap="$emit('navigation')"></image>
			</view>
			<view class="u-flex u-font-24">
				<view class="nearby-store-address__time">
					<view class="c-secondary">
						{{ $t('nearby.自取时间') }}
					</view>
					<view class="u-flex u-m-t-12" @tap="show = true">
						<text class="fw-600">{{ time }}</text>
						<image src="/pages/systemPay/static/nearby/arrow.png" class="img-32 u-m-l-4"></image>
					</view>
				</view>
				<view class="nearby-store-address__add e-flex-1">
					<view class="c-secondary">
						{{ $t('order.收货地址') }}
					</view>
					<view class="nearby-store-address__add-txt u-flex u-m-t-12" @tap="handleJumpAddress">
						<template v-if="address.name">
							<view class="e-flex-1 u-line-1">
								<text>{{ address.name }}</text>
								<text class="u-p-l-20">{{ address.phone }}</text>
								<text class="u-p-l-20">{{ address.nameExt }}</text>
							</view>
						</template>

						<image src="/pages/systemPay/static/nearby/arrow.png" class="img-32"></image>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" round="20rpx" @close="close">
			<view class="nearby-store-address__popup">
				<view class="u-p-t-22 u-p-b-24 u-rela u-flex-xy-center">
					<text class="u-font-32 fw-500">{{ $t('nearby.选择预计到店时间') }}</text>
					<image src="/pages/systemPay/static/close.png" class="nearby-store-address__popup-icon img-28" @tap="close"></image>
				</view>
				<view class="nearby-store-address__popup-body u-flex e-flex-items-start">
					<view class="nearby-store-address__popup-day">
						<view class="u-flex-xy-center" :class="{ 'bg-white': dayType === 1 }" @tap="setDayType(1)" v-if="toTimeList.length">
							<text>{{ $t('nearby.今天') }}</text>
							<text>({{ $t('nearby.' + today) }})</text>
						</view>
						<view class="u-flex-xy-center" :class="{ 'bg-white': dayType === 2 }" @tap="setDayType(2)">
							<text>{{ $t('nearby.明日') }}</text>
							<text>({{ $t('nearby.' + tomorrow) }})</text>
						</view>
					</view>
					<view class="nearby-store-address__popup-time e-flex-1 bg-white">
						<scroll-view scroll-y="true">
							<view class="nearby-store-address__popup-time__item u-flex u-flex-between" v-for="(item, index) in timeArray" :key="index" @tap="timeIndex = index">
								<text :class="{ 'c-primary': timeIndex === index }">{{ item }}</text>
								<image src="/pages/systemPay/static/success.png" v-show="timeIndex === index"></image>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	},
	// #endif
	props: {
		primary: String,
		addText: String,
		beginTime: {
			type: String,
			default: '00:00'
		},
		endingTime: {
			type: String,
			default: '23:59'
		},
		dateTime: String,
		address: Object
	},
	data() {
		return {
			time: '00:00',
			show: false,
			today: '周一',
			tomorrow: '周一',
			toTimeList: [],
			timeList: [],
			timeIndex: 0,
			dayType: 1
		};
	},
	computed: {
		bgColor() {
			return {
				backgroundColor: this.primary.replace('1)', '0.05)')
			};
		},
		timeArray() {
			return this.dayType === 1 ? this.toTimeList : this.timeList;
		}
	},
	created() {
		this.getTimeList();
	},
	watch: {
		dateTime() {
			this.getTimeList();
		},
		beginTime() {
			this.getTimeList();
		}
	},
	methods: {
		handleJumpAddress() {
			this.$goTo(
				'/pages/user/receivingAddress/index',
				{
					type: 1
				},
				{
					selectAddress: (e) => {
						this.$emit('update:address', e);
					}
				}
			);
		},
		close() {
			this.show = false;
			this.time = this.timeArray[this.timeIndex];
			this.$emit('timeChange', this.dayType, this.time);
		},
		setDayType(type) {
			this.dayType = type;
			this.timeIndex = 0;
		},
		zeroFill(num) {
			return num > 9 ? num : `0${num}`;
		},
		toNumber(str) {
			if (str === '00') {
				return 0;
			}
			return Number(str);
		},
		getTimeList() {
			let date = new Date(this.dateTime);
			let day = date.getDay();
			let h = date.getHours();
			let m = date.getMinutes();
			m = m + 10 - (m % 10);
			let startH = Number(`${this.beginTime[0]}${this.beginTime[1]}`);
			let endH = Number(`${this.endingTime[0]}${this.endingTime[1]}`);
			let startM = Number(`${this.beginTime[3]}${this.beginTime[4]}`);
			let endM = Number(`${this.endingTime[3]}${this.endingTime[4]}`);
			let [toTimeList, timeList] = [[], []];
			let endTimes = [];

			if (endM > 20) {
				endTimes.push(`${this.zeroFill(endH)}:20`);
				if (endM > 40) {
					endTimes.push(`${this.zeroFill(endH)}:40`);
				}
			} else if (endM === 0) {
				let fillH = this.zeroFill(endH - 1);
				for (let _m = 0; _m < 3; _m++) {
					endTimes.push(`${fillH}:${this.zeroFill(_m * 20)}`);
				}
			}
			if (endH > h) {
				for (let _h = h + 1; _h < endH - 1; _h++) {
					let fillH = this.zeroFill(_h);
					for (let _m = 0; _m < 3; _m++) {
						toTimeList.push(`${fillH}:${this.zeroFill(_m * 20)}`);
					}
				}
				toTimeList.push(...endTimes);
			} else if (endH === h) {
				endTimes.forEach((item) => {
					let _endM = Number(`${item[3]}${item[4]}`);
					if (_endM > m - 20 && m - _endM > 20) {
						toTimeList.push(item);
					}
				});
				// if(endM > )
			}

			for (let _h = startH; _h < endH - 1; _h++) {
				let fillH = this.zeroFill(_h);
				for (let _m = 0; _m < 3; _m++) {
					timeList.push(`${fillH}:${this.zeroFill(_m * 20)}`);
				}
			}
			this.toTimeList = toTimeList;
			this.timeList = timeList.concat(endTimes);
			if (!toTimeList.length) {
				this.dayType = 2;
			}
			this.today = `周${'日一二三四五六'.charAt(day)}`;
			this.tomorrow = `周${'一二三四五六日'.charAt(day)}`;

			this.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.nearby-store-address {
	padding: 32rpx 20rpx 22rpx 20rpx;
	&__icon {
		padding: 0 4rpx;
	}
	&__time {
		padding-right: 30rpx;
		position: relative;
		&::after {
			content: '';
			height: calc(100% - 20rpx);
			width: 2rpx;
			background-color: #e6e6e6;
			position: absolute;
			right: 0;
			top: 10rpx;
		}
	}
	&__add {
		overflow: hidden;
		padding-left: 28rpx;
	}
	&__popup {
		&-icon {
			position: absolute;
			right: 20rpx;
			top: 32rpx;
		}
		&-body {
			border-top: 2rpx solid #e2e2e2;
			background: #f7f7f7;
		}
		&-day {
			flex: 0 0 256rpx;
			> view {
				height: 94rpx;
			}
		}
		&-time {
			scroll-view {
				height: 468rpx;
			}
			&__item {
				padding: 0 20rpx 0 22rpx;
				height: 94rpx;
				image {
					width: 22rpx;
					height: 18rpx;
				}
			}
		}
	}
}
</style>
